<template>
	<view class="home_video">
		<view class="video-item" v-for="item in videos" :key="item.id" @click="handleClick" :data-id="item.id">
			<view class="item-image">
				<image :src="item.cover" mode="widthFix"></image>
				<view class="desc">{{item.playCount}}</view>
			</view>
			<view class="item-content">{{item.artistName}}-{{item.name}}</view>
		</view>
		<view v-if="!hasMore" class="last">
			<text>---我也是有底线的！---</text>
		</view>
	</view>
</template>

<script>
	import { getVideo } from '../../service/video_api.js'
	import { formatCounter } from '../../util/format.js'
	
	export default {
		data() {
			return {
				videos: [],
				hasMore: true,
				count: 0
			}
		},
		onLoad: function() {
			this.getVideos(10 ,this.count)
		},
		// 上拉刷新
		onPullDownRefresh: function() {
			this.videos = []
			this.count = 0
			this.getVideos()
			uni.stopPullDownRefresh()
		},
		// 到达底部，获取数据
		onReachBottom: function() {
			if(!this.hasMore) return
			const offset = this.count * 10
			this.getVideos(10, offset)
		},
		methods: {
			// 请求视频数据
			async getVideos(limit, offset) {
				const res = await getVideo(limit, offset)
				this.hasMore = res.data.hasMore
				this.videos = [...this.videos, ...res.data.data]
				this.count++
			},
			// 处理页面点击进行跳转
			handleClick(event) {
				const id = event.currentTarget.dataset.id
				uni.navigateTo({
					url: '../video_detail/video_detail?id=' + id
				})
			}
		}
	}
</script>

<style scoped>
	.home_video {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.video-item {
		width: 48%;
		border-radius: 2px;
		margin-bottom: 20rpx;
	}
	.item-image {
		width: 100%;
		border-radius: 2px;
		position: relative;
	}
	.item-image image {
		width: 100%;
		border-radius: 2px;
	}
	.item-image .desc {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 3px;
		font-size: 20rpx;
		color: #ccc;
		background-color: rgba(0,0,0,0.3);
	}
	.item-content {
		font-size: 24rpx;
	}
	.last {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
</style>
